<template>
	<view class="one" :style="{backgroundColor: bgColor}">
		<view class="titles">
			<view class="imgs" v-if="mode === 2">
				<image 
					:src="imagelist[0] || defaultPic" 
					mode="aspectFill" 
					@error="handleImageError"
				></image>
			</view>
			<text v-if="mode === 3" style="color: #000000;">{{title}}</text>
			<text v-else>{{title}}</text>
		</view>
		<view class="adbox" v-if="mode === 3" style="margin-top: 5rpx;">
			<view v-for="(item,index) in imagelist" :key="index">
				<image 
					:src="item || defaultPic" 
					mode="aspectFill" 
					@error="(e)=>handleImageError(e, index)">
				</image>
			</view>
		</view>
		<view class="tips">
			<text style="color: red;" :hidden="!isTop">置顶</text>
			<text>{{author}}</text>
			<text>{{comment}}</text>
			<view class="tips1">
				<text>{{time}}</text>
			</view>
		</view>
		<view class="tips">
			<slot name="tips" v-if="showSearch"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "NewsView",
		data() {
			return {
				defaultPic: "/static/default.png",
				failPic: "/static/fail.png",  
				status: 'News',
			};
		},
		methods: {
			handleImageError(e, index) {
				if (index !== undefined) {
					this.$set(this.imagelist, index, this.failPic);
				} else {
					this.imagelist[0] = this.failPic;
				}
			}
		},
		props: {
			title: {
				type: String,
				default: "新闻标题",
				required: true,
			},
			isTop: {
				type: Boolean,
				default: false,
				required: true
			},
			author: {
				type: String,
				default: "来源",
				required: true
			},
			comment: {
				type: String,
				default: "0",
				required: true
			},
			time: {
				type: String,
				default: "2000.00.00"
			},
			mode: {
				type: Number,
				default: 1,
				required: true
			},
			imagelist: {
				type: Array,
				default: () => []
			},
			showSearch: {
				type: Boolean,
				default: false,
			},
			bgColor: {
				type: String,
				default: '#ededed'
			}
		},
	}
</script>

<style>
	.one {
		padding: 5rpx;
	}

	.titles {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.imgs {
		height: 70rpx; 
		width: 70rpx;
		margin-right: 10rpx;
	}

	.imgs image {
		width: 100%;
		height: 100%;
	}

	.tips {
		margin: 5rpx;
		font-size: 12px;
		color: gray;
		display: flex;
		gap: 20rpx;
	}

	.tips1 {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	.adbox {
		display: flex;
		flex-direction: row;
		overflow-y: hidden;
		white-space: nowrap;
	}
	
	.adbox > view {
		display: inline-block;
		flex: none;
		width: 200rpx;
		height: 100rpx;
		margin-right: 10rpx;
	}
	.adbox image {
		width: 100%;
		height: 100%;
	}
</style>